<template>
  <div class="message">
    <div class="i-layout-page-header">
      <span class="ivu-page-header-title">{{ $route.meta.title }}</span>
    </div>
    <div class="table-box" style="padding-bottom: 0;padding-top: 10px" >
        
      <Card :bordered="false" dis-hover class="">
		  <Row type="flex" class="mb20">
		    <Col span="24">
				<div class="user-info">
					<img class="avatar" :src="data.user_avatar">
					<div class="right-info">
						<div class="title">{{data.nick_name}}</div>
						<div class="time">{{data.created_time_str}}</div>
					</div>
				</div>
		    </Col>
		  </Row>
		  
		  <Row type="flex" class="mb20">
		    <Col span="24">
				<div class="content">
					<p class="title">{{data.title}}</p>
					<p class="ctnt">{{data.content}}</p>
					<p class="imgs" v-if="data.imgs_arr.length > 0" v-viewer>
						<template v-for="i in data.imgs_arr">
							<img class="img" v-lazy="i" style="cursor: pointer;">
						</template>
					</p>
					<p class="video_c"  v-if="data.video.length > 0" >
						<video controls class="video" :src="data.video"></video>
					</p>
				</div>
				<div class="total-container">
					<div class="total">
						<img class="icon" src="../../../../assets/images/im2/msg.png">
						<span class="text">{{data.commtent_total}}</span>
					</div>
					<div class="total">
						<img class="icon" src="../../../../assets/images/im2/browse.png">
						<span class="text">{{data.browse_total}}</span>
					</div>
					<div class="total">
						<img class="icon" src="../../../../assets/images/im2/like.png">
						<span class="text">{{data.like_total}}</span>
					</div>
				</div>
		    </Col>
		  </Row>
		  <Row type="flex" class="mb20">
		    <Col span="24">
				<div class="replys">
					<div class="item" v-for="n in data_comments">
						<img class="avatar" :src="n.user_avatar">
						<div class="right-inf">
							<p class="name">{{n.nick_name}}</p>
							<p class="content">
								{{n.content}}
							</p>
							<div class="else-info">
								<span class="time">{{n.created_time_str}}</span>
								<div class="reply"><img class="icon" src="../../../../assets/images/im2/msg.png"><span>{{n.reply_total}}回复</span></div>
								<div class="star"><img class="icon" src="../../../../assets/images/im2/like.png"><span>{{n.like_total}}</span></div>
								<!-- <a class="hide" href="#">隐藏评论</a> -->
								<a class="del" @click="del(n.id)">删除评论</a>
							</div>
							<div class="sub_replys">
								<div class="item" v-for="ns in n.replys">
									<img class="avatar" :src="ns.user_avatar">
									<div class="right-inf">
										<p class="name">{{ns.nick_name}}<span v-if="ns.reply_com_id != 0" class="arrow">▶</span>{{ns.by_nick_name}}</p>
										<p class="content">
											{{ns.content}}
										</p>
										<div class="else-info">
											<span class="time">{{ns.created_time_str}}</span>
											<!-- <div class="reply"><img class="icon" src="../../../../assets/images/im2/msg.png"><span>30回复</span></div> -->
											<div class="star"><img class="icon" src="../../../../assets/images/im2/like.png"><span>{{ns.like_total}}</span></div>
											<!-- <a class="hide" href="#">隐藏评论</a> -->
											<a class="del" @click="del(ns.id)">删除评论</a>
										</div>
									</div>
								</div>
								<a v-if="page.hasmore" class="more" @click="loadMore(n.id)">加载更多</a>
							</div><!--sub_replys-->
						</div>
					</div>
					<a v-if="page2.hasmore" class="more" @click="getCommentsData()">加载更多</a>
				</div><!--replys end-->
		    </Col>
		  </Row>
      </Card>
    </div>
    
  </div>
</template>

<script>
import { detailApi } from '@/api/userpost';
import { ListPostApi,ListComReplysApi } from '@/api/usercomments';
export default {
  components: {},
  data() {
    return {
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
	  
	  grid: {
	    xl: 8,
	    lg: 8,
	    md: 8,
	    sm: 24,
	    xs: 24,
	  },
      boxs: [
        { content: '左上', id: 1 },
        { content: '上', id: 2 },
        { content: '右上', id: 3 },
        { content: '左中', id: 4 },
        { content: '中', id: 5 },
        { content: '右中', id: 6 },
        { content: '左下', id: 7 },
        { content: '下', id: 8 },
        { content: '右下', id: 9 },
      ],
      ruleValidate: {},
	  data:{},
	  data_comments:[],
	  page: {
	    pageNum: 2, // 当前页
	    pageSize: 1, // 每页显示条数
		hasmore:true,
	  },
	  page2: {
	    pageNum: 1, // 当前页
	    pageSize: 1, // 每页显示条数
		hasmore:true,
	  },
    };
  },
  created() {
	  
  },
  mounted: function () {
	this.getData();
	this.getCommentsData();
  },
  methods: {
	getData(){
		detailApi(this.$route.params.id)
		  .then((res) => {
			  console.info(res)
			  this.data = res.data;
		  })
		  .catch((err) => {
		    this.$Message.error(err.msg);
		  });
	},
	getCommentsData(){
		ListPostApi({
			'post_id':this.$route.params.id,
			'page':this.page2.pageNum,
			'limit':this.page2.pageSize
		})
		  .then((res) => {
			  console.info(res)
			  
			  if(res.data.list.length >= this.page2.pageSize){
				  this.page2.hasmore = true;
				  this.page2.pageNum++;
			  }else{
				  this.page2.hasmore = false;
			  }
			  this.data_comments = this.data_comments.concat(res.data.list);
		  })
		  .catch((err) => {
		    this.$Message.error(err.msg);
		  });
	},
	loadMore(id){
		if(!this.page.hasmore)return;
		ListComReplysApi({
			'com_id':id,
			'page':this.page.pageNum,
			'limit':this.page.pageSize
		})
		  .then((res) => {
			  if(res.data.list.length >= this.page.pageSize){
				  this.page.hasmore = true;
				  this.page.pageNum++;
			  }else{
				  this.page.hasmore = false;
			  }
			  console.info(res)
			  //todo 重新添加新的评论到某个评论下
			  let datas = [];
			  this.data_comments.forEach(function(item){
				  if(item.id == id){
					  var newArr = item['replys'].concat(res.data.list);
					  item['replys'] = newArr;
				  }
				  
				  datas.push(item);
			  });
			  this.data_comments = datas;
			  console.info(datas)
		  })
		  .catch((err) => {
		    this.$Message.error(err.msg);
		  });
	},
    del(id) {
      let delfromData = {
        title: '删除评论',
        url: `/usercomments/del/${id}`,
        method: 'DELETE',
        ids: '',
      };
      this.$modalSure(delfromData)
        .then((res) => {
          this.$Message.success(res.msg);
          this.getCommentsData();
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
    
  },
};
</script>
<style scoped lang="less">
.ivu-input-group > .ivu-input:last-child,
/deep/.ivu-input-group-append {
  background: none;
  color: #999999;
}
/deep/.ivu-input-group .ivu-input {
  border-right: 0px !important;
}
.content /deep/.ivu-form .ivu-form-item-label {
  width: 133px;
}
.topIput {
  width: 186px;
  background: #ffffff;
  border-right: 0px !important;
}
.abbreviation {
  .top {
    display: flex;
    justify-content: flex-start;
    .topBox {
      display: flex;
      .topRight {
        width: 254px;
        margin-left: 36px;
      }
      .topLeft {
        width: 94px;
        height: 94px;

        text-align: center;
        font-size: 13px;
        font-weight: 400;
        color: #000000;
        .img {
          // width: 84px;
          height: 67px;
          background: #f7fbff;
          border-radius: 4px;
          margin-bottom: 9px;
          .imgs {
            width: 70px;
            height: 51px;
            display: inline-block;
            text-align: center;
            margin-top: 8px;
          }
        }
      }
    }
  }
  .content {
    /deep/.ivu-form-item-label {
      width: 120px;
    }
    .flex {
      display: flex;
      justify-content: flex-start;
      // width: 400px;

      .contentIput {
        width: 400px;
      }
      .conents {
        display: flex;
        .title {
          width: 30px;
          margin-top: 70px;
          margin-left: 6px;
        }
        .positionBox {
          display: flex;
          flex-wrap: wrap;
          width: 101px;
          height: 99px;
          border-right: 1px solid #dddddd;
          .box {
            width: 33px;
            height: 33px;
            // border-radius: 4px 0px 0px 0px;
            border: 1px solid #dddddd;
            cursor: pointer;
          }
          .on {
            background: rgba(24, 144, 255, 0.1);
          }
        }
      }
    }
  }
}
</style>
<style scoped>
.message /deep/ .ivu-table-header thead tr th {
  padding: 8px 16px;
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.user-info{
	display: flex;
	flex-direction: row;
	
	.avatar{
		width:50px;
		height:50px;
		border-radius: 25px;
	}
	.right-info{
		display: flex;
		flex-direction: column;
		margin-left: 10px;
		.title{
			font-size: 14px;
			color: black;
		}
		.time{
			font-size: 12px;
			color: gray;
		}
	}
}
.content{
	max-width: 800px;
	.title{
		font-weight: bold;
		margin-bottom: 10px;
	}
	.ctnt{
		text-indent: 2em;
	}
	
	.imgs{
		display: flex;
		flex-direction: row;
		margin-top: 20px;
		.img{
			width: 100px;
			height:100px;
			margin-right: 10px;
		}
	}
	.video_c{
		display: flex;
		flex-direction: row;
		margin-top: 20px;
		.video{
			width: 320px;
			height:240px;
		}
	}
}
.total-container{
	margin-top: 30px;
	max-width: 800px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	.total{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 20px;
		.icon{
			width: 15px;
			height: 15px;
			margin-right: 3px;
		}
		.text{
			font-size: 12px;
			color: gray;
		}
	}
}
.replys{
	display: flex;
	flex-direction: column;
	.item{
		display: flex;
		flex-direction: row;
		padding-bottom: 20px;
		.avatar{
			width: 30px;
			height:30px;
			border-radius: 15px;
		}
		.right-inf{
			margin-left: 10px;
			display: flex;
			flex-direction: column;
			.name{
				font-size: 14px;
				color: black;
				margin-top: 5px;
			}
			.content{
				margin-top: 10px;
			}
			.else-info{
				margin-top: 10px;
				display: flex;
				flex-direction: row;
				align-items: center;
				.time{
					margin-right: 10px;
				}
				.reply{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-right: 10px;
					.icon{
						width: 15px;
						height: 15px;
						margin-right: 3px;
					}
				}
				.star{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-right: 10px;
					.icon{
						width: 15px;
						height: 15px;
						margin-right: 3px;
					}
				}
				.hide{
					margin-right: 10px;
				}
				.del{
					margin-right: 10px;
				}
			}
			
			.sub_replys{
				margin-top: 15px;
				display: flex;
				flex-direction: column;
				.item{
					display: flex;
					flex-direction: row;
					padding-bottom: 20px;
					.avatar{
						width: 30px;
						height:30px;
						border-radius: 15px;
					}
					.right-inf{
						margin-left: 10px;
						display: flex;
						flex-direction: column;
						.name{
							font-size: 14px;
							color: black;
							margin-top: 5px;
						}
						.arrow{
							margin-left: 5px;
							margin-right: 5px;
							font-size: 10px;
						}
						.content{
							margin-top: 10px;
						}
						.else-info{
							margin-top: 10px;
							display: flex;
							flex-direction: row;
							align-items: center;
							.time{
								margin-right: 10px;
							}
							.reply{
								display: flex;
								flex-direction: row;
								align-items: center;
								margin-right: 10px;
								.icon{
									width: 15px;
									height: 15px;
									margin-right: 3px;
								}
							}
							.star{
								display: flex;
								flex-direction: row;
								align-items: center;
								margin-right: 10px;
								.icon{
									width: 15px;
									height: 15px;
									margin-right: 3px;
								}
							}
							.hide{
								margin-right: 10px;
							}
							.del{
								margin-right: 10px;
							}
						}
					}
				}
				.more{
					margin-left: 60px;
					font-size: 12px;
					color: gray;
				}
			}
		}
	}
	
	.more{
		margin-left: 60px;
		font-size: 12px;
		color: gray;
	}
}
</style>
